Graphical Java Lesson 1-3: Using Images and Simple Animations 


In Lesson 1-1, you learned how to make GUI programs, in Java. In Lesson 1-2, you learned how to 
make those programs interactive. In this lesson, you will learn how to use drawing commands to 
display images, rather than just shapes, on the screen. You will also learn how to make simple 
animations, using those images. 


Let's create a new project: Walking Mario. In this program, you will be able to draw Mario on the 
screen. Using the left and right arrow keys, you will be able to make him walk left and right, and show 
him walking, using a simple animation. 


Before we start coding, we need to talk about graphics. How do you draw Mario? There are two ways 
we could draw him. The first is with shape drawing commands. You could draw his face with an oval, 
his eyes with more ovals, his cap with a polygon of some sort, the "M" on his cap with text, his famous 
mustache with some lines, his overalls with another polygon, his shoes with round-comered rectangles, 
etc. You already know how to do this, in principle, but it would be TEDIOUS, requiring many drawing 
commands, just to make a halfway-decent Mario! 


The second is with images. First, we could use a paint program to draw a picture of Mario. Then, we 
could use image drawing commands, similar to shape drawing commands, to draw that picture on the 
screen. Once we loaded that picture into memory, it would only take ONE drawing command to draw a 
realistic (or realistic-enough) Mario! 


For this program, we'll use an image of Mario I found on the internet, rather than drawing our own. 
Open your web browser, and go to http://www.mariouniverse.com/images/sprites/nes/smb/mario.png. 
We're going to save this picture in a special location on your computer, so that your program will be 
able to find it, when it runs. 


Go back to NetBeans, and run your empty program. Now, go to the location on your computer where 
NetBeans stores all of your projects. 
Once you're in the folder that contains 


all of your projects, go to the folder called "Walking Mario". From there, go to the "build" folder, then 
"classes", then "walking", and then "mario". In this folder, you'll see a file named 
WalkingMario.class. This is the compiled version of your program's WalkingMario class! 
When you run your program, Java runs this file. You don't have to worry about this file, though. 
Here, make a folder called "images". Go back to your browser, and save the picture of Mario in this 
folder. If your browser automatically saves pictures in a "Downloads" folder, save it there, and then 
move it to your new "images" folder. 


You can now close your browser. Go back to NetBeans. Let's set up our main window. Add the 
following import statement to your WalkingMario.java source file: 


import javax.swing.JFrame; 


Then, make your Wal kingMario class look like: 


public class WalkingMario { 
public static JFrame main window; 


public static void main(String[] args) { 
main window = new JFrame ("Walking Mario"); 
main window.setDefaultCloseOperation (JFrame.EXIT ON CLOSE); 
main window.setSize(400, 180); 
main window.setVisible (true) ; 


Now, let's set up our content pane. Create a new class: Content Pane. Go to your 
Content Pane. java source file, and add the following import statements to it: 


import javax.swing.JPanel; 
import java.awt.Graphics; 


Then, make your Content Pane class look like: 


public class ContentPane extends JPanel { 
public ContentPane () 
{ 


super(null, true); 


} 


protected void paintComponent (Graphics g) 
{ 
} 


We'll leave the paintComponent method empty, until we're ready to draw Mario on the screen. Let's 
give our main window a ContentPane object, so that Mario can be drawn later. Go to your 
WalkingMario. java source file. In the main method, before the call to set Visible, insert the 
following line of code: 


main window.setContentPane (new ContentPane()); 


Now, we're going to load our picture of Mario from your computer's hard drive into memory. Hold on 
to your hats; this is going to be complicated! I'll try to keep it as simple as possible. To store our picture 
in memory, we'll need a global variable, of type Image. Import the Image class (in the java. awt 
package), with the following import statement: 


import java.awt.Image; 


Under the line ... 


public static JFrame main window; 


... add the line: 
public static Image mario img; 


We're going to store our picture of Mario in the global variable, mario img, so that we can access it 
from the paintComponent method of the Content Pane class, when it's time to repaint the 
screen. 


So far, no problems, right? Now, we're going to add the code that loads the picture into memory. This 
will require several import statements: 

import java.io.InputStream; 
import javax.imageio.Imagel0O; 
import java.io.1IOException; 


The InputStream class (in the java.io package) will be used for reading our picture of Mario 
from your computer's hard drive. The Image1I0O class (in the javax. imageio package) will be used 
to process the Input Stream's data into a picture. Finally, an TOException (in the java.io 
package) is a type of error that can happen, if say our picture file is missing. In the main method, 
BEFORE the code that creates your program's main window, insert the following code: 


try (InputStream mario file = 
WalkingMario.class.getResourceAsStream("images/mario.png") ) 


{ 
mario img = ImagelO.read(mario file); 


} 


The part from try to just before the opening curly brace is ONE long line of code! This code also 
appears to break a few rules that you've learned! Notice how there's NO semicolon after the closing 
parenthesis, before the opening curly brace! The above block of code is a try-with-resources statement, 
which is sort of like an if statement. Opening a file is fraught with danger! The main danger is that the 
file (images/mario.png) is missing, which leaves the rest of the program without a picture to 
display. If the file is missing, we're just going to crash, because that's the simplest way of handling 
errors. However, if we crash, we will crash "gracefully". We will make sure that we close any files 
(here, only images/mario.png) that we open. In addition, we will make sure that we close 
images/mario.png, if everything goes well. 


How does Java know where to look for images/mario.png? That strange-looking method call, 
WalkingMario.class.getResourceAsStream("images/mario.png"), tells Java to 
start looking in the folder that contains the WalkingMario.class file. FROM THERE, it looks in 
the "images" folder for mario.png. If Java doesn't find a file with that name, your program will 
crash. 


If Java successfully opens the file, we can then try to read its data as a picture. Java can work with 
many types of picture files, including bitmaps, GIFs, JPEGs, and PNGs. The ImageIO class contains 
some useful methods for working with picture files. Here, we call its read method, to try and process 
the data of the InputStream, mario file, into something that can be stored inmario_ img, and 
later drawn on the screen. 


But, wait! I'm getting red, squiggly lines underneath this code! There's one more thing we have to 
do. This code can generate errors of type IOException. We must either handle them, or tell Java that 
main, the method in which these errors can happen (the method that contains this fancy code), is going 
to "pass the buck" to the method that called it. To keep things simple, we're going to "pass the buck". 
Change ... 


public static void main(String[] args) 


.. tO: 


public static void main(String[] args) throws IOException 


IOException should be followed by the opening curly brace of the main method. The words, 
throws IOException, added to the first line of main, tell Java that ifan IOException happens 
in the main method, the main method will "pass the buck" to the method that called it. It's THAT 
method's problem! However, since main is our program's entry point, no other method calls main. 
Thus, if an TOException happens in main, our program will just crash. 


Before we continue, check that your WalkingMario class (leaving out any comments) looks like: 


public class WalkingMario { 
public static JFrame main window; 
public static Image mario img; 


public static void main(String[] args) throws IOException { 
trey (InputStream mario file = 
WalkingMario.class.getResourceAsStream("images/mario.png") ) 


{ 
mario img = ImagelO.read(mario file); 


} 


main window = new JFrame ("Walking Mario"); 

main window.setDefaultCloseOperation (JFrame.EXIT ON CLOSE); 
main window.setSize(400, 180); 

main window.setContentPane (new ContentPane()); 

main window.setVisible (true) ; 


Finally, let's draw our picture of Mario on the screen! Go to your ContentPane. java source file. In 
the paintComponent method of the ContentPane class, add the following line of code: 


g.drawImage (WalkingMario.mario img, 80, 0, null); 


Run your program. If you have done everything right, it should look like: 


=ioix 


If you resize the window, you will be able to see the whole picture. I counted, and that's 82 Marios! I 
only want to draw ONE Mario on the screen! When we called the drawImage method of g, we 
had Java draw ALL of mario _img on the screen. Java copied ALL of the pixels of mario img (the 
first argument passed to drawI mage), and pasted them to an on-screen rectangle with a top-left corner 
at (80, 0) (the second and third arguments passed to drawImage), relative to the origin of the 
window's content pane. 


If your program crashes, check that the picture file, mario.png, is in the right place. Go to the 
location on your computer where NetBeans stores all of your projects. Once you're there, go to the 
"Walking Mario" folder. From there, go to "build", then "classes", then "walking", and then "mario". In 
that folder, you should see the files, ContentPane.class andWalkingMario.class. You 
should also see an "images" folder. If you don't have an "images" folder, make one. Go to the "images" 
folder. In it, you should see the file, mario.png. If you don't see that file, download it from 
http://www.mariouniverse.com/images/sprites/nes/smb/mario.png, and put it in the "images" folder. 


Check that yourWalkingMario.java source file contains the following import statements: 


import javax.swing.JFrame; 


= 


import java.awt.Image; 


= 


import java.io.InputStream; 
import javax.imageio.Imagel0O; 


= 


import java.io.1IOException; 


Finally, check that the paintComponent method of your Content Pane class looks like: 


protected void paintComponent (Graphics g) 
{ 
g.drawImage (WalkingMario.mario img, 80, 0, null); 


} 


Now, we are going to make our program draw only one Mario on the screen, rather than 82. What we 
want to do is copy only SOME of the pixels of mario img to an on-screen rectangle. Go to your 
ContentPane. java source file. Change this line of code ... 


g.drawImage (WalkingMario.mario img, 80, 0, null); 
... to this: 


g.drawImage (WalkingMario.mario img, 80, 0, 96, 32, 
209, 52, 225, 84, null); 


The above statement is ONE line of code. Run your program. It should look like: 


=ioix 


As you can see, the program now draws only one Mario on the screen. We used another version of the 
drawImage method of g to draw ONLY the part of mario img in which Mario is standing still and 
facing right. The first parameter of drawImage is the source image, which is where we copy the 
pixels of Mario FROM (we copy them TO the screen). The second and third parameters are the x- and 
y-coordinates of the top-left corner of the destination rectangle. Here, we decided to "start" drawing 
Mario at (80, 0) on the screen. The drawImage method copies a rectangle of pixels FROM the source 
image (mario img), and pastes that rectangle of pixels TO the screen (g). Pixels are COPIED FROM 
the source rectangle (specified with IMAGE coordinates), and PASTED TO the destination rectangle 
(specified with SCREEN coordinates). The fourth and fifth parameters are the x- and y-coordinates of 
the bottom-right corner of the destination rectangle. Since Mario is 16 pixels wide and 32 pixels high, 
we added 16 to our 80, to get 96, and added 32 to our 0, to get 32. The simple addition: 

(80, 0) + (16, 32) = (96, 32). The sixth and seventh parameters are the x- and y-coordinates of the 
top-left corner of the source rectangle. The rectangular part of the picture in which Mario is standing 
still and facing right has a top-left corner at (209, 52) (relative to the top-left corner of the picture, NOT 
the screen!). The eighth and ninth parameters are the x- and y-coordinates of the bottom-right corner of 
the source rectangle. Since Mario is 16 pixels wide and 32 pixels high, we added 16 to our 209, to get 
225, and added 32 to our 52, to get 84. The simple addition: (209, 52) + (16, 32) = (225, 84). Don't 
worry about the tenth parameter. In your programs, it will always be null. 


Remember: 


* drawlImage copies a rectangle of pixels from the source image to the screen, NOT the other 
way around. 

* You specify the destination rectangle in SCREEN coordinates, while you specify the source 
rectangle in IMAGE coordinates. 

* You give drawImage the coordinates of the DESTINATION rectangle first. 

¢ For each of the rectangles, you specify the x- and y-coordinates of the top-left corner, and then 
the x- and y-coordinates of the bottom-right corner, NOT the x- and y-coordinates of the top-left 
corner, and then the rectangle's width and height. 

* To get the x-coordinate of the bottom-right corner of a rectangle, add the rectangle's width to the 
x-coordinate of the top-left corner of that rectangle. To get the y-coordinate of the bottom-right 
corner of a rectangle, add the rectangle's height to the y-coordinate of the top-left corner of that 
rectangle. 


Being able to draw Mario on the screen is nice, but it would be more interesting if Mario could move 
around on the screen. Let's create a new class: Mario. Don't confuse your Mario class with your 
WalkingMario class! Your Mario class will contain data and methods related to the movement of 
Mario on the screen, while your WalkingMario class's main method will create your program's 
main window. After you have created the Mario class, go to your Mario. java source file. Add the 
following member variable to your Mario class: 


private Rectangle my rect; 

Import the Rectangle class, with the following import statement: 

import java.awt.Rectangle; 

Even though Mario is a person, rather than a rectangular block, his form approximates a rectangle 
enough that we can use a Rectangle object to store information about where he is on the screen. 
Write the following constructor for the Mario class: 

public Mario () 

{ 


my rect = new Rectangle(80, 20, 16, 32); 
} 


When we make Mario, we'll have him start at (80, 20) on the screen. His width will always be 16 
pixels, and his height will always be 32 pixels. Your Mario class should now look like: 


public class Mario { 
private Rectangle my rect; 


public Mario () 
{ 

my rect = new Rectangle(80, 20, 16, 32); 
} 


Next, we're going to make a global variable: an object of type Mario. Obviously, this will be used to 
keep track of information about Mario. Go to your WalkingMario.java source file. Add the 
following declaration to your list of global variables: 


public static Mario mario; 


Ha! "Mario Mario" is his real name! In the main method, AFTER the code that loads the picture of 
Mario, and BEFORE the code that sets up our program's main window, insert the following line of 
code: 


mario = new Mario(); 
Your Wal kingMario class should now look like: 


public class WalkingMario { 
public static JFrame main window; 


public static Image mario img; 
public static Mario mario; 


he ey as 


public static void main(String[] args) throws IOException { 
try (InputStream mario file = 
WalkingMario.class.getResourceAsStream("images/mario.png") ) 


{ 


mario img = ImagelO.read(mario file); 
} 
mario = new Mario(); 
main window = new JFrame ("Walking Mario"); 


main window.setDefaultCloseOperation (JFrame.EXIT ON CLOSE); 
main window.setSize(400, 180); 

main window.setContentPane (new ContentPane()); 

main window.setVisible (true) ; 


} 


We now have a Mario object, nario, which can be drawn, moved, animated, ..., once we write the 
code for all of that. First, we want to be able to draw Mario on the screen. Go to your 
ContentPane. java source file. In the paintComponent method of the ContentPane class, 
change this line of code ... 


g.drawImage (WalkingMario.mario img, 80, 0, 96, 32, 
209, 52, 225, 84, null); 


.. tO: 


g.drawMario (WalkingMario.mario img, WalkingMario.mario, 
209, 52, 225, 84, null); 


STOP! You didn't REALLY expect that to work, did you?! g, obviously, doesn't have a drawMario 
method. Why not? Think about it: how would the people who wrote the Graphics class know that 
someone, someday, would want to specifically draw Mario? And if they did write a drawMario 
method, how would you draw Luigi? They would also have to write a drawLuigi method! In 
addition, a Mario game wouldn't be much fun, without any enemies, so they would also need 
drawBowser, drawGoomba, drawKoopa, etc. methods. And then, what if Nintendo released 
another Mario game, with new characters? The writers of Graphics would have to add EVEN 
MORE methods to that class! And why stop at just Mario? People want to be able to draw characters 
from other games, like Zelda, as well! 


In short, the Graphics class doesn't know how to draw Mario. We have to give it instructions. We'll 
essentially make our own drawMario method, by giving our Mario class its own draw method. Go 
to your Mario.4java source file. Import the Graphics class, with the following import statement: 


import java.awt.Graphics; 
Now, give your Mario class the following draw method: 


public void draw(Graphics g) 
{ 
g.drawImage (WalkingMario.mario img, my rect.x, my rect.y, 
my rect.x + my rect.width, my rect.y + my _rect.height, 
209, 52, 225, 84, null); 


g doesn't know how to draw a Mario object, but it DOES know how to copy a rectangle of pixels 
from an image to the screen. We draw a Mario object by copying a 16 x 32 rectangle of pixels from 
mario img toa rectangle on the screen with the top-left and bottom-right corners of that Mario 
object. 


In other words, drawing a Mario object is a "complex" operation. This "complex" operation can be 
decomposed into "simple", primitive operations, like drawImage, which g can perform, one after 
another. Drawing a Mario object isn't a very complex task; it requires only one primitive operation. 
Other tasks, like drawing a smiley face out of shapes, might require the composition of several 
primitive operations. 


To compose a complex operation out of primitive operations is to put the primitive operations together, 
to make the complex one. To decompose a complex operation into primitive operations is to break the 
complex task into the primitive operations that are required to perform it. This is similar to how 
complex data types (objects, like Marios) are composed out of primitive data types (like ints). 


In order to actually draw Mario, we need to tell our Content Pane to call the above draw method. 
Go back to your Content Pane. java source file. Replace ALL of the code in the 
paintComponent method with the following line of code: 


WalkingMario.mario.draw(g); 


Your paintComponent method should now look like: 


protected void paintComponent (Graphics g) 
{ 
WalkingMario.mario.draw(g); 


} 


In our paintComponent method, ContentPane throws up its hands, and says, "I don't know how 
to draw you, Mario. You know how, so draw yourself." We offload the task of drawing Mario to the 
draw method of the Mario class. We pass g to that draw method, because you need g, in order to 
draw anything on the screen. 


Run your program. It should look like: 


=10)x/ 


Before we continue, make sure your Mario class, in yourMario.java source file, looks like: 


public class Mario { 
private Rectangle my rect; 


public Mario () 
{ 

my rect = new Rectangle(80, 20, 16, 32); 
} 


public void draw(Graphics g) 
{ 
g.drawImage (WalkingMario.mario img, my rect.x, my rect.y, 
my rect.x + my rect.width, my rect.y + my rect.height, 
209, 52, 225, 84, null); 


We can now draw Mario on the screen, at his current location, but he doesn't move. Our program is not 


even interactive yet! Next, we will make Mario move left and right, when you press the left and right 
arrow keys. 


Let's give our Mario class some move methods. Make sure you are in your Mario. java source file. 
First, add the following method to your Mario class: 


public void moveLeft () 
{ 
iy .Scl.= = my rect x =~ 1; 


} 


Later, we'll have our program call this method, to move Mario's rectangle left by one pixel, when the 
left arrow key is pressed. Next, add the moveRight method to your Mario class: 


public void moveRight () 
{ 


hy Sci. = My rect. + 17 


} 


As you can see, it's pretty similar to the moveLeft method. Now, we need to give our program the 
ability to respond to keyboard input. Create a new class: KBInput Processor. Go to your 
KBInputProcessor. java source file. Import the KeyAdapter and KeyEvent classes, with the 
following import statements: 


import 
import 


java.awt 
java.awt 


-event 
-event 


.KeyAdapter; 
.KeyEvent; 


cr ct 
qv CT 
ct ct 


We'll make our KBInputProcessor class a better version of the KeyAdapter class, again, by 
changing ... 


public class KBInputProcessor 

.. to: 

public class KBInputProcessor extends KeyAdapter 

Again, we won't write a constructor for this class, because the built-in one will work fine. We'll make 


our program respond to "key pressed" events, by adding the following keyPressed method to the 
KBInputProcessor class: 


public void keyPressed(KeyEvent e) 
{ 
int key code = e.getKeyCode(); 


if (key code == KeyEvent.VK_LEFT) 

{ 
WalkingMario.mario.moveLeft (); 
WalkingMario.main window. repaint (); 


else if (key code == KeyEvent.VK_ RIGHT) 
{ 
WalkingMario.mario.moveRight (); 
WalkingMario.main window. repaint (); 


When you press the left arrow key, Mario will move to the left. When you press the right arrow key, 
Mario will move to the right. When you press either one of these keys, the program will also repaint the 
screen, so that you will see Mario move. 


Before we continue, make sure your KBInputProcessor class, in your 
KBInputProcessor. java source file, looks like: 


public class KBInputProcessor extends KeyAdapter { 
public void keyPressed(KeyEvent e) 


{ 
int. key code = e.getKeyCode () ; 


ae (key code == KeyEvent. VE. LEFT) 


WalkingMario.mario.moveLeft(); 
WalkingMario.main window.repaint (); 


else if (key code == KeyEvent.VK_RIGHT) 


WalkingMario.mario.moveRight (); 
WalkingMario.main window. repaint (); 


Finally, we need to have our main window use a KBInputProcessor object, to listen for 
"key pressed" events, so that our program can respond to keyboard input. Go to your 
WalkingMario.4java source file. In your program's main method, just before the call to 
setVisible, insert the following line of code: 


main window.addKeyListener (new KBInputProcessor()); 


Try running your program. You should be able to move Mario to the left and right, by pressing the left 
and right arrow keys. When I move Mario to the left, he still faces to the right. Also, Mario doesn't 
walk, he just "slides" left and right. We'll make improvements to this program, to fix both of these 
issues. 


Before we continue, make sure the body of the main method of your WalkingMario class looks 
like: 


try (InputStream mario file = 
WalkingMario.class.getResourceAsStream("images/mario.png") ) 


{ 


mario img = ImagelO.read(mario file); 
} 
mario = new Mario(); 
main window = new JFrame ("Walking Mario"); 


main window.setDefaultCloseOperation (JFrame.EXIT ON CLOSE) ; 


main window.setSize(400, 180); 
main window.setContentPane (new ContentPane()); 
main window.addKeyListener (new KBInputProcessor()); 


main window.setVisible (true) ; 


First, we'll improve this program by making it so that when Mario is moving to the left, he faces left, 
rather than right. In order to do this, we'll need to refactor the code of the Mario class. Go to your 
Mario.java source file. Let's add another member variable to the Mario class: 


private boolean facing right; 


We're going to use facing right to keep track of which way Mario is facing. If Mario is facing 
right, we'll make sure that facing right is true, while if Mario is facing left, we'll make sure that 
facing right is false. Initially, we'll have Mario face right, so in the constructor of your Mario 
class, add the following line of code: 


facing Tight. = irae, 


Now, we'll need to actually use facing right, in the other methods of the Mario class. Let's start 
with the draw method. Change this long line of code ... 


g.drawImage (WalkingMario.mario img, my rect.x, my rect.y, 
my rect.x + my Krect.width, my rect.y + my rect. heignat, 
209, 52, 225, 84, null); 


... to this if statement: 


if (facing right) 
g.drawImage (WalkingMario.mario img, my rect.x, my rect.y, 
my rect.x + my rect.width, my rect.y + my rect.height, 
209, 52, 225, 84, null); 
else 
g.drawImage (WalkingMario.mario img, my rect.x, my rect.y, 
my rect.x + my rect.width, my rect.y + my_rect.height, 
180, 52, 196, 84, null); 


Feel free to use curly braces in the above if statement, even though they are not necessary, as each of its 
blocks contains only one statement. Each of the calls to drawImage uses the same destination 
rectangle: the one which specifies Mario's current location on the screen. However, each uses a 
DIFFERENT source rectangle! The rectangular part of mario img, with Mario standing still and 
facing right, has a top-left corner at (209, 52). The part of mario img, with Mario standing still and 
facing left, has a top-left corner at (180, 52). Both parts are 16 pixels wide and 32 pixels high. 


So far, so good! However, NO code in the Mario class EVER changes the value of facing right. 
Once we set facing right to true, in the constructor, Mario faces right, and continues to face 
right, until the program ends. Let's turn things around with a turnAround method: 


public void turnAround() 


{ 
facing right = Itacing Fighiy 
} 


When the turnAround method is called, we will use the logical NOT operator to make Mario face 
the other way. If Mario is currently facing right, he will face left. If Mario is currently facing left, he 
will face right. 


We're getting closer! Now, we need to have our moveLeft and moveRight methods actually use 
turnAround. If we are currently facing left, and want to move left, we'll simply move left. If we are 
currently facing left, and then want to move right, first, we'll turn around, and then, we'll start to move 
right. If we are currently facing right, and then want to move left, first, we'll turn around, and then, 
we'll start to move left. Finally, if we are currently facing right, and want to move right, we'll simply 
move right. We can display these four possible scenarios in a table: 


If we are facing ... ... and want to move ... ... the FIRST thing we'll do is ... 
LEFT LEFT Move left. 
LEFT RIGHT Turn around. 
RIGHT LEFT Turn around. 
RIGHT RIGHT Move right. 


This is called a state transition table. If you noticed the similarity to truth tables (like the ones for 
logical NOT, AND, and OR) and mathematical function tables, you have sharp eyes and a sharp mind! 
An object of type Mario has a state, which is described by its member variables, my rect and 
facing right. The variable,my rect, is used to keep track of Mario's current position on the 
screen. The variable, facing right, is used to keep track of which way Mario is currently facing. 
We'll specify that Mario will only move in the same direction as the one in which he is currently facing. 
Therefore, we can substitute the possible values of facing right (false and true), in the first 
column, for the above directions (LEFT and RIGHT). 


Our program can receive keypresses, as input. We press the left arrow key, if we want to go left, and we 
press the right arrow key, if we want to go right. We can substitute these possible keypresses (left and 
right arrow keys), in the second column, for the above directions (LEFT and RIGHT). 


Finally, our program responds to keypresses in several possible ways. We can move Mario to the left 
one pixel, move Mario to the right one pixel, or turn Mario around. We can substitute lines of code, in 
the third column, for the above actions. With all of these substitutions, our state transition table looks 
like: 


If facing rightis... |... and this key is pressed ... ... we'll execute this code ... 
my rect.x = 
false left arrow key my rect.x - 1; 
false right arrow key turnAround(); 
true left arrow key turnAround(); 
: my rect.x = 
true right arrow key my rect.x + 1; 


We can then transform the above table into code. Change the body of the moveLeft method (called 
when the left arrow key is pressed), so that it looks like: 


at ({ifacing xight) 

My PSct.s = My rect. — 17 
else 

turnAround(); 


Similarly, change the body of the moveRight method (called when the right arrow key is pressed), so 
that it looks like: 


if (facing right) 

iy <ecl.= = my Cectiex < 1; 
else 

turnAround (); 


Run your program. Press the left and right arrow keys a bunch of times. Hold them down for a little 
while. If you can get Mario to face left, your program might look like: 


=iolx 


If your program is not working properly, make sure your Mario class looks like: 


public class Mario { 
private Rectangle my rect; 
private boolean facing right; 


public Mario () 

{ 
hy rect = new Rectangle (80, 20; 16, 32) 7 
facing right. = trae; 


} 


public void draw(Graphics g) 
{ 
If {facing wight) 
g.drawImage (WalkingMario.mario img, my rect.x, my rect.y, 
my rect.x + my Fect.width, my rect.y + my_rect height, 
209, 52, 225, 84, null); 
else 
g.drawImage (WalkingMario.mario img, my rect.x, my rect.y, 
my rect.x% + my rect.width, my rect.y + my rect.height, 
180, 52, 196, 84, null); 


} 


public void moveLeft () 
{ 
If (facing £i.ght) 
iy ©Scl.s = My reci.e = 1; 
else 
turnAround (); 


} 


public void moveRight () 
{ 
ar (facing Fight) 
hy Kect.« = my rect.x + I; 
else 
turnAround (); 


} 


public void turnAround() 
{ 

facing right = !facing right; 
} 


Notice how we ONLY had to change the code of the Mario class, when we made Mario able to face 
left or right. That's good program design! It's easier to test and debug, because if you only change one 
piece of code, and then, your program has a bug, you know EXACTLY which piece of code is causing 
that bug! 


Now, we'll make Mario able to walk left and right, rather than just "slide" in those directions. Let's look 
at our picture with 82 Marios in it: 
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Little Marios, big Marios, Marios in the fire suit, walking Marios, jumping Marios, swimming Marios, 
Marios standing still, etc. It's like an entire phone full of Mario selfies! These are frames, which can be 
used to make simple animations! Imagine you have a flip book, with pages that alternate between three 
pictures of Mario, each taken at a different point in the process of him taking a single step (to the left or 
right). If you then thumb through your flip book, it looks like Mario is walking! This is how movies 
(especially older, animated ones) work, and how characters in 2D games appear to move. 


To animate Mario, we'll need to change some code in the Mario class. Make sure you are in your 
Mario.java source file. Mario is going to have four frames of animation for each direction he can 
face and therefore move in. One of these frames will be used to draw him standing still, while the other 
three will be used to draw him walking in that direction. To store data about these frames, and clarify 
our code, let's make some symbolic constants in our Mario class: 


private static final int FRAME STOPPED = 0; 
private static final int FRAME WALK FIRST = 1; 
private static final int FRAME WALK LAST = 3; 


private static final Rectangle|[] LEFT FRAME SRC = 
{ 
new Rectang] 


e(180, 52, 16, 32), 

new Rectangle 
e 
e 


90, S32, 16, 32), 
120, 52, 16, 32), 
150, 32, 16, 32) 


new Rectang] 


new Rectang] 


NS pe ae 


private sfatic final Rectangle|] RIGHT FRAME SRC = 
{ 

new Rectangle(209, 52, 16, 32), 

new Rectangle (299, 52, 16, 32), 

new Rectangle (269, 52, 16, 32), 

new Rectangle(239, 52, 16, 32) 


}; 


Insert these declarations at the beginning of the body of your Mario class, after its opening curly 
brace, but before the declarations of Mario's member variables. Let me explain what these are for. In 
addition to having a direction, Mario is going to have another piece of state: the number of the frame 
that we are currently using to draw him. Frame 0 (FRAME STOPPED) will be used to draw him 
standing still, while frames 1-3 (FRAME WALK FIRST—FRAME WALK LAST) will be used to draw 
him walking. Let's add that piece of state to Mario's list of member variables, with the following 
declaration: 


private int frame; 


Initially, we'll have Mario stand still, so in the constructor of your Mario class, add the following line 
of code: 


frame = FRAME STOPPED; 


Now, we'll need to actually use frame, in the other methods of the Mario class. Again, we'll start 
with the draw method. In the if block of the if statement of the draw method, change this long line 
of code ... 


g.drawImage (WalkingMario.mario img, my rect.x, my rect.y, 
my rect.» + my rect.width, my réect.y + my rect.height, 
209, 52, 225, 84, null); 


... to this EVEN LONGER line of code: 


g.drawImage (WalkingMario.mario img, my rect.x, my rect.y, 
my rect.x + my rect.width, my rect.y + my rect.height, 
RIGHT FRAME SRC[frame].x, RIGHT FRAME SRC[frame].y, 
RIGHT FRAME SRC[frame].x + RIGHT FRAME SRC[frame] .width, 
RIGHT FRAME SRC[frame].y + RIGHT FRAME SRC[frame].height, null); 


The above line is terribly long, but indexing into that array (RIGHT FRAME SRC) saves us from 
having to use an if statement that contains many similar lines of code, like: 


if (frame == 0) 

g.drawImage (WalkingMario.mario img, ...); 
else if (frame == 1) 

g.drawImage (WalkingMario.mario img, ...); 
else if (frame == 2) 

g.drawImage (WalkingMario.mario img, ...); 
else if (frame == 3) 

g.drawImage (WalkingMario.mario img, ...); 


I call the process of replacing an if statement with a statement that accesses an element of an array 
arrayization. Generally, you can do it if: 


¢ The numbers you're using to make a decision (like frame numbers) form a sequence, like 
0, 1,2, 3. 

¢ The actions you're going to perform, for each number, are very similar to each other, like calls 
to drawImage. 


Let's do the same for our el se block. Change this long line of code ... 


g.drawImage (WalkingMario.mario img, my rect.x, my rect.y, 
my rect.x + my rect.width, my rect.y +. my rect. hergnt, 
180, 52, 196, 84, null); 


... to this super-long line of code: 


g.drawImage (WalkingMario.mario img, my rect.x, my rect.y, 
my rect.x + my rect.width, my rect.y + my rect .height, 
LEFT FRAME SRC[frame].x, LEFT FRAME SRC[frame].y, 
LEFT FRAME SRC[frame].x + LEFT FRAME SRC[frame] .width, 
LEFT FRAME SRC[frame].y + LEFT FRAME SRC[frame].height, null); 


SRC is acommon abbreviation for the word, "source". The Rectangles of the array, 

LEFT FRAME SRC, are the source rectangles for the frames we'll use to draw Mario, when he's facing 
left. The Rectangle at index 0 is the source rectangle for frame 0, the one at index | is the source 
rectangle for frame 1, etc. Similarly, the Rectangles of the array, RIGHT FRAME SRC, are the 
source rectangles for the frames we'll use to draw Mario, when he's facing right. 


Now, let's change the code of the turnAround method, so that when Mario turns around, the first 
thing he does is stand still, facing the other way. Add the following line of code at the end of the 


turnAround method: 


frame = FRAME STOPPED; 


The last thing we'll need to do is change our moveLeft and moveRight methods, so that they also 
animate Mario. Thankfully, since we still want to essentially do the same things as before (moving or 
turning around), in response to keyboard input, we don't have to change our state transition table, which 
I will show you again: 


If we are facing ... ... and want to move ... ... the FIRST thing we'll do is ... 
LEFT LEFT Move left. 
LEFT RIGHT Turn around. 
RIGHT LEFT Turn around. 
RIGHT RIGHT Move right. 
We have already made the necessary changes to the turnAround method, so now, we just have to 


account for the animation required by the other two scenarios: moving left and moving right. These two 
animations are essentially the same: 


* If Mario is standing still, make him start walking in the direction he's facing. 
° Change his frame from FRAME STOPPED (0) to FRAME WALK FIRST (1). 
¢ If Mario is currently walking, have him keep walking in that direction. 
° Ifhe's on frame 1, put him on frame 2. If he's on frame 2, put him on frame 3. If he's on 
frame 3, put him back on frame 1. 
© He doesn't go back to frame 0 again, because when you walk, you don't stop after taking 
each step, right? You keep walking, until you want to stop. 
o Frames 1-3 (FRAME WALK FIRST-FRAME WALK LAST) make up Mario's walk cycle, 
because while he is walking, he will cycle through those frames. 


If Mario is to move in a given direction, let's make a function table that shows which frame we want to 
use next, based on his current frame: 


Current Frame Next Frame 
0 1 
1 2 
2 3 
a 1 


Our code will change Mario's current frame (the current value of frame) to his next frame (the next 
value of frame). We could use a straightforward if statement here, but I would prefer to use my brain, 
instead, to write the following code that re/ates the input (left column) of this function to its output 
(right column): 


frame = frame + 1; 
if (frame > FRAME WALK LAST) 
frame = FRAME WALK FIRST; 


For the first three rows, there's a pattern: to get the output, add one to the input. However, the fourth 
row breaks this pattern! It goes from 3 to 1, as the exception to this rule. Therefore, it needs to be 
handled as a special case, with a small if statement. Let's test this code, for all of the possible input 
values: 


* frame is 0. Add one to frame, so frame is now |. One is NOT greater than 3 (the value of 
FRAME WALK LAST), so frame stays at 1. 
* frame is 1. Add one to frame, so frame is now 2. Two is NOT greater than 3, so frame 
stays at 2. 
* frame is 2. Add one to frame, so frame is now 3. Three is NOT greater than 3, so frame 
stays at 3. 
* frame is 3. Add one to frame, so frame is now 4. Four IS greater than 3, so frame gets set 
to 1 (the value of FRAME WALK FIRST). 
© It's okay that frame had an intermediate value of 4, during this process! As long as the 
FINAL value of frame is a valid input (0-3), for the NEXT run of this code, it's fine. 


We have just PROVEN (mathematically, by exhaustion) that the above code works for any valid value 
of frame, so now, we're going to integrate (combine) it into the code of the moveLeft and 
moveRight methods. Change the body of the moveLeft method, so that it looks like: 


af (lfacing right) 
{ 
frame = frame + 1; 
if (frame > FRAME WALK LAST) 
frame = FRAME WALK FIRST; 


iy ©6cl.x = My Poct ss = 17 
} 
else 

turnAround () ; 


Similarly, change the body of the moveRight method, so that it looks like: 


= (tracing Fight) 
{ 
frame = frame + 1; 
if (frame > FRAME WALK LAST) 
frame = FRAME WALK FIRST; 


iy 8Scl.x = My Precis. + 17 
} 
else 

turnAround () ; 


Run your program. Try making Mario walk left and right, with the left and right arrow keys. You 
should be able to see Mario walking, although if you hold down an arrow key, he might animate really 


fast. I find that quickly pressing an arrow key, over and over, rather than holding it down, makes for the 
SSRN RTO students are intrested. discuss possible ways of slowing down the 


If everything is working, with Mario facing right, in mid-step, your program might look 
like: 


-io x! 


¢ 


Before we continue, check that your Mario class looks like: 


public class Mario { 
Private static fing] int FRAME STOPPED = 07 
private etatic final int FRAME WALK FIRST = 1; 
private static final int FRAME WALK LAST = 3; 


te 


private static final Rectangle|[] LEFT FRAME SRC = 
{ 


180, 52, 16, 32), 
90, 52, 16, 32), 
120, S52; LO; 32); 
150, 52, 16, 32) 


new Rectangle 
new Rectangle 
new Rectangle 
new Rectangle 


fa I 


a 


private Static final Rectangle|) RIGHT FRAME SRC = 
{ 

new Rectangle(209, 52, 6, 32), 

new Rectangle (299, 52, 6; -32).+ 

new Rectangle(269, 52, 6, 32), 

new Rectangle(239, 52, 6, 32) 


}; 


private Rectangle my rect; 
private boolean facing right; 
private int frame; 


public Mario () 

{ 
my rect = new Rectangle(80, 20, 16, 32); 
facing right = true; 
frame = FRAME STOPPED; 

} 


public void draw(Graphics g) 
{ 
af {facing Fight) 
g.drawImage (WalkingMario.mario img, my rect.x, my rect.y, 
my rect.% + my rect.witth, my rect.y + my rect .heignt, 
RIGHT FRAME SRC[frame].x, RIGHT FRAME SRC[frame].y, 
RIGHT FRAME SRC[frame].x + RIGHT FRAME SRC[frame] .width, 
RIGHT FRAME SRC[frame].y + RIGHT FRAME SRC[frame] .height, 
treed) Fy 
else 
g.drawImage (WalkingMario.mario img, my _rect.x, my rect.y, 
my rect.x + my rect.width, my rect.y + my _rect.height, 
LEFT FRAME SRC[frame].x, LEFT FRAME SRC[frame].y, 
LEFT FRAME SRC[frame].x + LEFT FRAME SRC[frame] .width, 
LEFT FRAME SRC[frame].y + LEFT FRAME SRC[frame].height, 
fie) y 


} 


public void moveLeft () 
{ 
$f A Paeing: Light) 
i 
frame = frame + 1; 
if (frame > FRAME WALK LAST) 
frame = FRAME WALK FIRST; 


ny -£eclux = my recisx = “ly 
} 
else 

turnAround () ; 


public void moveRight () 
{ 
if (facing right) 
{ 
frame = frame + 1; 
if (frame > FRAME WALK LAST) 
frame = FRAME WALK FIRST; 


My 26Cl.% = My PSC lax a 17 
} 
elseé 

turnAround () ; 


} 


public void turnAround() 

{ 
facing right = [facing right; 
frame = FRAME STOPPED; 


When I let go of an arrow key, Mario just stays there, frozen in mid-step. Now, we are going to fix 
this issue. We want Mario to stand still again, regardless of which frame of animation he is currently 
on, when we LET GO OF the left or right arrow key. 


Let go of? Right now, our program only responds to "key pressed" events. In order to have the program 
do anything, when you let go of a certain key, the program needs to listen for "key released" events. Go 
to your KBInputProcessor. java source file. Whenever a key is pressed, a "key pressed" event is 
fired by Java. If we hold down that key, Java keeps firing "key pressed" events. When we let go of that 

key, Java fires a single "key released" event. If our main window is listening for "key released" events, 

the keyReleased callback method of our KBInputProcessor class will be called by Java. 


Right now, whenever the left or right arrow key is released, nothing special happens. If Mario is in 
mid-step, he just stays frozen there, until one of these keys is pressed again. That looks kind of silly. 
We want to make Mario stand still, but not turn around, whenever the left or right arrow key is 
released, after it has been pressed (or held down for a time). 


The Mario class needs another method, to make Mario stand still, without turning around: 
standStill. Go to your Mario. java source file. Add the following standStill method to 
your Mario class: 


public void standStill () 


{ 
frame = FRAME STOPPED; 


} 


To make Mario stand still, all we have to do is set his frame to FRAME STOPPED. Now, we need to 
call the standStill method, from somewhere, to make Mario stand still, whenever the left or right 
arrow key is released. Go back to your KBInput Processor. java source file. Let's add the 
following keyReleased method to the KBInputProcessor class: 


public void keyReleased(KeyEvent e) 


{ 
int key code = e.getKeyCode(); 


a= (key code == KéyEvent. VE. LEFT |'| key code. == KeyEvent.VK_RIGHT) 
{ 
WalkingMario.mario.standStill(); 
WalkingMario.main window. repaint (); 


} 


keyReleased uses the SAME virtual key codes as keyPressed: VK_LEFT, for the left arrow key, 
and VK_RIGHT, for the right arrow key. 


Run your program. Try making Mario walk left and right, with the left and right arrow keys. If you 
hold down an arrow key, and then release it, you should be able to see Mario walk in that direction, and 
then stand still again. When Mario stops moving, he should face the same way as he did when he 
started to move. 


Feel free to play around with this code, although you might want to save a backup copy first, in case 
you mess something up, and don't know how to fix it. Try changing Mario's speed. Try changing the 
speed of Mario's animation. Try making other animated characters and objects, like Luigi or a 
flashing star of invincibility. 


